@config.main("SNP Heatmap") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("SNP Heatmap")

            <div class="main-body">


                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">


                            @components.chr("3")

                            <div class="col-sm-12 form-group my-position">
                                <label class="col-sm-3 my-position-title">Start Position:</label>
                                <div class="col-sm-4" style="text-align: left">
                                    <input class="form-control" name="start" id="start">
                                </div>
                                <div class="col-sm-4" style="line-height: 40px">
                                    <span >
                                        e.g.,&nbsp;<a href="#" onclick="getStart()"><em class="egCrics">1</em></a></span>
                                </div>

                            </div>

                            <div class="col-sm-12 form-group my-position">
                                <label class="col-sm-3 my-position-title">End Position:</label>
                                <div class="col-sm-4" style="text-align: left">
                                    <input class="form-control" name="end" id="end">
                                </div>
                                <div class="col-sm-4" style="line-height: 40px">
                                    <span  >
                                        e.g.,&nbsp;<a href="#" onclick="getEnd()"><em class="egCrics">2000000</em></a></span>
                                </div>
                            </div>


                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                            Run</button>
                    </div>
                </form>




                <div id="result" class="result">
                    <hr/>

                    <h5>Result:</h5>

                    <div id="heatmap" style="width: 1000px;
                        margin: 0 auto"></div>


                </div>
            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("config/genomeTable.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("FormValidation/dist/js/formValidation.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("FormValidation/dist/js/framework/bootstrap.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/data.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/heatmap.js")" type ="text/javascript"></script>
    <script>

            $(function () {
                getChr()
                $("#snp-table").bootstrapTable()
                formValidation()


            })

            function getStart() {
                $("#start").val("1")
            }

            function getEnd() {
                $("#end").val("200000")
            }

            function getChr() {
                let species = "ZMNO"
                $.post("/alfalfa/search/getChr?species=" + species, (data) => {
                    $("#chr").empty().select2({data:data})
                })
            }


            function Search() {
                let form = $("#form")
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "@routes.ToolsController.snpHeatmapRun()" ,
                        type: "post",
                        data: form.serialize(),
                        success: (data) => {
                            heatmapCellType(data)
                          //  $("#snp-table").bootstrapTable("load", data.snpJson);
                            let $result = $("#result")
                            $result.show();
                            layer.close(index)
                            let target_top = $result.offset().top ;
                            $("html,body").animate({scrollTop: target_top}, 800);
                        }
                    })
                }
            }


            function formValidation() {

                let integer = {
                    validators: {
                        notEmpty: {
                            message: 'Word size is required！'
                        },
                        integer: {
                            message: 'Word size must be intger！'
                        }
                    }
                }
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        start: integer,
                        end: integer
                    }
                });
            }


            function heatmapCellType(data) {

                Highcharts.chart('heatmap', {
                    chart: {
                        type: 'column',
                        zoomType: 'x',
                    },
                    title: {
                        text: 'Allele Freq'
                    },
                    credits:{
                        enabled:false
                    },
                    xAxis: {
                        labels: {
                            enabled: false
                        },
                        categories: data.categories
                    },
                    yAxis: {
                        title: {
                            text:"ALLELE"
                        }
                    },
                    tooltip: {
                        headerFormat: ' <b>Pos: {point.x}</b> <br/>',
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                        shared: true
                    },
                    plotOptions: {
                        column: {
                            stacking: 'percent'
                        },
                        series: {
                            pointPadding: 0,
                            groupPadding: 0,
                            shadow: false
                        }
                    },
                    series: data.series
                });

            }

    </script>
}


